<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animate css动画</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .container {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 100px;
        background-color: lightblue;
        width: 30vw;
        margin: 0 auto;
      }
      span {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div style="background-color: antiquewhite; width: 30px; "><span class="animate__animated animate__rotateIn">H</span></div>
      <span class="animate__animated animate__slideInDown">E</span>
      <span class="animate__animated animate__flipInX">L</span>
      <span class="animate__animated animate__fadeInUp">L</span>
      <span class="animate__animated animate__heartBeat animate__delay-1s">O</span>
    </div>

    <script>
      const domA = document.querySelector('.container>div>span');
      const domO = document.querySelector('.container>span:last-of-type');
    
      domO.addEventListener('animationend', () => {
        domA.classList.remove('animate__rotateIn');
        domA.classList.add('animate__hinge');
      });
    </script>
  </body>
</html>
